<%@taglib prefix="t" tagdir="/WEB-INF/tags" %>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>wineXpress online shop</title>
    </head>
    <body>
        <t:customerNavigation/>
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <h1 class="page-header">Change Password</h1>
                    <ol class="breadcrumb">
                        <li><a href="/WineXpressClient/index.jsp">Home</a></li>
                        <li><class="active">Change Password</li>
                    </ol>
                </div>
            </div>
            <div class="panel panel-default" style="width:70%; margin-left: 15%; margin-top: 10px" >
                <div class="panel-heading">
                    <h3 class="panel-title">Change Password</h3>
                </div>
                <div class="panel-body">
                    <form class="form-horizontal" role="form" id="defaultForm"  name="changePassword" action="/WineXpressClient/accountManagement/changePasswordResult" method="post">
                        <div class="form-group">
                            <label class="col-sm-3 control-label">Password</label>
                            <div class="col-sm-8">
                                <input type="password" class="form-control" name="password" placeholder="Password">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">New Password</label>
                            <div class="col-sm-8">
                                <input type="password" class="form-control" name="newPassword" placeholder="New Password">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">Confirm Password</label>
                            <div class="col-sm-8">
                                <input type="password" class="form-control" name="confirmPassword" placeholder="Confirm New Password">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-5 col-sm-10">
                                <button type="submit" class="btn btn-default">Submit</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <script type="text/javascript">
                $(document).ready(function() {
                    $('#defaultForm').bootstrapValidator({
                        message: 'This value is not valid',
                        fields: {
                            newPassword: {
                                validators: {
                                    notEmpty: {
                                        message: 'The password is required and can\'t be empty'
                                    },
                                    identical: {
                                        field: 'confirmPassword',
                                        message: 'The password and its confirm are not the same'
                                    }
                                }
                            },
                            confirmPassword: {
                                validators: {
                                    notEmpty: {
                                        message: 'The confirm password is required and can\'t be empty'
                                    },
                                    identical: {
                                        field: 'newPassword',
                                        message: 'The password and its confirm are not the same'
                                    }
                                }
                            }

                        }
                    });
                });
            </script>
            </div>
            <t:footer/>
    </body>
</html>
